<template>
	<view class="content-floor">
		<image class="floor-img" :src="floor.titlePicUrl" mode=""></image>
		<scroll-view class="floor-list" scroll-x="true" enable-flex>
			<view class="list-item" v-for="item in floor.itemList" :key="item.id">
				<image :src="item.primaryPicUrl" mode=""></image>
				<text>{{item.simpleDesc}}</text>
			</view>
			<view class="list-last-item">
				<text>查看更多>></text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name:'ContentFloor',
		props:{
			floor:{
				type:Object,
				required:true,
				default:{}
			}
		}
	}
</script>

<style lang="stylus" scoped>
	.content-floor
		margin-top:6upx
		.floor-img
			height: 350upx;
			width: 100%;
		.floor-list 
			display: flex 
			height: 280upx;
			.list-item 
				display: flex 
				flex-direction: column
				margin-right:20upx
				text 
					font-size:26upx
					text-overflow: ellipsis;
					overflow: hidden;
					    /*将对象作为弹性伸缩盒子模型显示*/
					display: -webkit-box;
					    /*设置子元素排列方式*/
					-webkit-box-orient: vertical;
					    /*设置显示的行数，多出的部分会显示为...*/
					-webkit-line-clamp: 2;
				image 
					width: 200upx;
					height: 200upx;
					padding-bottom:10upx
					background-color: #ccc;
			.list-last-item 
				width: 200upx;
				height: 280upx;
				line-height: 280upx;
				text-align: center;
				flex-shrink: 0
</style>